<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags" %>
<html>
<head>
    <script>

    </script>
    <title>Title</title>
    <link rel="icon" href="${pageContext.request.contextPath}/static/img/favicon.ico"  type="image/x-icon" />
    <link rel="stylesheet" href="/static/css/codecss/style.css">
    <link rel="stylesheet" href="/static/css/codecss/index.css">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <script src="/static/js/codejs/index.js"></script>
</head>
<body>
<jsp:include page="page.jsp"></jsp:include>
<form action="/user/login" method="post" id="form">
    <input type="hidden" name="codehide" value="" id="code">
    <input type="hidden" name="_method" value="put" />
<div class="bg">
    <div class="inputBox">
        <div class="fontSize32">xxxxxx请输入手机号</div>
        <div class="input">
            <select  >
                <option value="">+86</option>
            </select>
            <input name="phonenum" type="text" id="tel" placeholder="请输入手机号" maxlength="11">
        </div>
        <div class="input">
            <input type="text" name="code" id="codehide" placeholder="验证码">
            <!--<div class="grayBg">获取验证码</div>-->
            <input id="btnSendCode" type="button" class="grayBg" value="获取验证码"/>
        </div>
    </div>
    <button type="button" class="btn btn-primary" id="tijiao">提交</button>

<%--    登录<input type="button" id="tijiao" value="确定">--%>

    <div class="gray">
        <span class="choose">
            <input type="checkbox" class="input_check" id="check">
            <label for="check">
                <span>已阅读并同意<a href="" class="blue">《注册服务条款》</a></span>
            </label>
        </span>
    </div>
</div>
</form>
<%--<form action="/user/login" method="post" id="form">--%>
<%--<h3>手机号码快速登录</h3>&ndash;%&gt;--%>
<%--    <input type="hidden" name="codehide" value="" id="code">--%>
<%--    请输入验证手机号<input name="phonenum" type="text" id="phone">--%>
<%--    发送验证码<input type="button" id="sub" value="发送验证">--%>
<%--    验证码<input type="text" name="code" id="codehide">--%>
<%--    登录<input type="button" id="tijiao" value="提交">--%>
<%--</form>--%>
</body>
<script>
    var phoneWidth = parseInt(window.screen.width);
    var phoneScale = phoneWidth / 640;
    var ua = navigator.userAgent;//判断浏览器类型
    if (/Android (\d+\.\d+)/.test(ua)) {
        var version = parseFloat(RegExp.$1);
        if (version > 2.3) {
            document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ', maximum-scale = ' + phoneScale + ', target-densitydpi=device-dpi">');
        } else {
            document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
        }
    } else {
        document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');
    }

    //生成6位数随机数
    function num(){
        var mm=Math.random();
        var six = "";
        if(mm>0.1)
        {
            six=Math.round(mm*1000000);
        }else{
            mm += 0.1;
            six = Math.round(mm*1000000);
        }
        return six;
    }

    $("#btnSendCode").click(function () {
        //生成验证码
        var code=num();
        var phone=$("#tel").val();
        var data={"code":code,"phonenum":phone};
        $.ajax({
            url:"/user/code",
            type : "post",
            dataType : "json",
            data: JSON.stringify(data),
            contentType: "application/json",
            success:function (data) {
                if(data.flag=='true'){
                    $("#code").val(code);
                    layer.msg('验证码已发送');
                }else{
                    layer.msg('手机验证失败', function(){
                    });
                }
            }
        })
    })

    $("#tijiao").click(function () {
        var codehide=$("#codehide").val();
        var code=$("#code").val();
        if(code==codehide){
            $("#form").submit();
        }else{
            layer.msg('验证码错误', function(){
            });
        }

    })
</script>

</html>
